<template>
	<view class="">
		<!-- <custom-nav-bar title="大屏"></custom-nav-bar> -->
		<view class="cardBg">
			<view class="cardbox">
				<uni-section title="温湿度" type="line" />
				<view class="time" @click="show = true">
					<uni-dateformat :date="timeValue" format="yyyy/MM/dd"></uni-dateformat>
				</view>
			</view>
			<view class="charts">
				<qiun-data-charts type="area" :opts="areaopts" :chartData="areachartData" />
			</view>
		</view>
		<view class="cardBg">
			<view class="cardbox">
				<uni-section title="警报统计" type="line" />
				<view class="time" @click="show = true">
					<uni-dateformat :date="timeValue" format="yyyy/MM/dd"></uni-dateformat>
				</view>
			</view>
			<view class="charts">
				<qiun-data-charts type="column" :opts="columnopts" :chartData="columnchartData" />
			</view>
		</view>
		<view class="cardBg">
			<view class="cardbox">
				<uni-section title="警报分布" type="line" />
				<view class="time" @click="show = true">
					<uni-dateformat :date="timeValue" format="yyyy/MM/dd"></uni-dateformat>
				</view>
			</view>
			<view class="charts">
				<qiun-data-charts type="bubble" :opts="bubbleopts" :chartData="bubblechartData" />
			</view>
		</view>
		<u-datetime-picker :show="show" v-model="value1" mode="date" @cancel="show=false"
			@confirm="confirm"></u-datetime-picker>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				show: false,
				value1: Number(new Date()),
				linechartData: {},
				columnchartData: {},
				bubblechartData: {},
				areachartData: {},
				areaopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				lineopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					// padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						// data: [{
						// 	min: 0,
						// 	max: 
						// }],
						// gridType: "dash",
						// dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow"
						}
					}
				},
				columnopts: {
					title: {
						name: '警报统计'
					},
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						data: [{
							min: 0
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							barBorderCircle: true,
							linearType: "custom"
						}
					}
				},
				bubbleopts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: false,
						gridType: "dash",
						splitNumber: 5,
						boundaryGap: "justify",
						min: 0,
						max: 250
					},
					yAxis: {
						disableGrid: false,
						gridType: "dash",
						data: [{
							min: 0,
							max: 150
						}]
					},
					extra: {
						bubble: {
							border: 2,
							opacity: 0.5
						}
					}
				}
			}
		},
		computed: {
			timeValue() {
				return this.value1 ? this.value1 : Date.now()
			}
		},
		mounted() {
			this.areagetServerData();
			this.columngetServerData();
			this.bubbleServerData()
		},
		onReady() {},
		methods: {
			confirm(e) {
				this.show = false
				console.log(e);
			},
			areagetServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["4/3", "4/4", "4/5", "4/6", "4/7", "4/8", ],
						series: [{
								name: "温度",
								data: [35, 18, 25, 37, 24, 20]
							}
						]
					};
					this.areachartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			linegetServerDatas() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["4/3", "4/4", "4/5", "4/6", "4/7", "4/8", "4/9", "4/10"],
						series: [{
							name: "压力",
							data: [60, 77, 83, 95, 115, 125, 135, 145]
						}]
					};
					this.linechartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			columngetServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						categories: ["1月", "2月", "3月", "4月", "5月", "6月"],
						series: [{
								name: "变量",
								data: [35, 36, 31, 33, 13, 34]
							},
							{
								name: "机组",
								data: [18, 27, 21, 24, 6, 28]
							}
						]
					};
					this.columnchartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
			bubbleServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
					let res = {
						series: [{
								name: "Bark",
								data: [
									[40, 50, 20, "Bark"],
								]
							},
							{
								name: "邮箱",
								data: [
									[60, 100, 40, "邮箱"],
								]
							},
							{
								name: "短信",
								data: [
									[110, 30, 30, "短信"],
								]
							},
							{
								name: "机器人",
								data: [
									[200, 100, 50, "机器人"],
								]
							}
						]
					};
					this.bubblechartData = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style scoped lang="scss">
	.cardBg {
		.charts {
			width: 100%;
			height: 300px;
		}

		.cardbox {
			display: flex;
			justify-content: space-between;

			.time {
				font-size: 12px;
				background: #eee;
				border-radius: 4px;
				padding: 0px 10px;
				display: flex;
				align-items: center;
				color: #676767;
			}
		}
	}
</style>